import { ref, onDeactivated } from 'vue'
import {
  getNewSongsList,
  getNewAlbumsList
} from '@/service/find-music/news-music'
import LocalCache from '@/utils/cache'
import { validationAging } from '@/utils/validation-aging'

export function InitDoing() {
  // 切换新歌与新碟按钮
  const isTog = ref(true)
  const togList = () => {
    albumNum.value = 50
    isTog.value = true
  }
  const togAnchor = () => {
    isTog.value = false
    getNewAlbums(tabs.value[currentIndex.value].name)
  }
  const tabs = ref([
    { label: '全部', name: 'ALL', id: 0, list: [], albums: [] },
    { label: '华语', name: 'ZH', id: 7, list: [], albums: [] },
    { label: '欧美', name: 'EA', id: 96, list: [], albums: [] },
    { label: '韩国', name: 'KR', id: 8, list: [], albums: [] },
    { label: '日本', name: 'JP', id: 16, list: [], albums: [] }
  ])
  // 监听导航点击事件 控制显示对应语种歌曲数据
  const activeName = ref('ALL')
  const handleClick = (tab: any) => {
    currentIndex.value = tab.index
    if (isTog.value) {
      showNum.value = 10
      lookShow.value = true
      activeName.value = tab.props.name
      if (tabs.value[currentIndex.value].list.length == 0) {
        getNewsSongs(tabs.value[currentIndex.value].id)
      }
    } else {
      albumNum.value = 35
      getNewAlbums(tabs.value[currentIndex.value].name)
    }
  }
  // 获取歌曲数据
  const currentIndex = ref(0)
  function getNewsSongs(type = 0) {
    getNewSongsList(type).then((res: any) => {
      const all: any = [...res.data]
      tabs.value[currentIndex.value].list = all
    })
  }
  const albums = ref([])
  function getNewAlbums(area: string, limit = 30, offset = 0) {
    getNewAlbumsList(area, limit, offset).then((res: any) => {
      const all: any = [...res.monthData]
      albums.value = all
    })
  }
  getNewAlbums(tabs.value[currentIndex.value].name)

  // 查看全部
  const lookShow = ref(true)
  const showNum = ref(10)
  const handleShowAll = () => {
    lookShow.value = false
    showNum.value = tabs.value[currentIndex.value].list.length
  }

  // 离开页面后保存数据到本地
  onDeactivated(() => {
    LocalCache.setCache('NewsMusicList', JSON.stringify(tabs.value))
    LocalCache.setCache('NewsMusicTime', new Date().getTime())
  })

  // 初始化判断本地数据是否过期需要重新请求
  const initGetLocal = () => {
    // 若本地存储值为空不能使用jsonparse进行解析 会抛出异常
    if (!LocalCache.getCache('NewsMusicList')) {
      getNewsSongs(tabs.value[currentIndex.value].id)
    } else {
      const arr = JSON.parse(LocalCache.getCache('NewsMusicList')) || []
      const time = JSON.parse(LocalCache.getCache('NewsMusicTime')) || 0
      const flag = validationAging(time)
      if (flag || arr.length == 0 || arr[currentIndex.value].list.length == 0) {
        // 重新请求
        getNewsSongs(tabs.value[currentIndex.value].id)
      } else {
        //本地数据
        tabs.value = arr
      }
    }
  }
  initGetLocal()

  const albumNum = ref(50)
  // 无限滚动
  function infiniteScroll() {
    if (!isTog.value) {
      albumNum.value += 50
    }
  }

  return {
    tabs,
    isTog,
    togList,
    togAnchor,
    activeName,
    handleClick,
    currentIndex,
    handleShowAll,
    lookShow,
    showNum,
    albums,
    infiniteScroll,
    albumNum
  }
}
